<template>
  <div class="shopList">
    <card
      v-for="item in splittedList"
      :detail="item"
      :key="item.gid"
      :src="item.img.split('$')[0]"
      :bid="item.id"
      :srcInstead="item.img.split('$')[1]"
      :descContent="item.desc"
      :marketPrice="parseInt(item.price * 1.2)"
      :sellPrice="item.price"
    ></card>
    <el-pagination
      layout="pager"
      @current-change="changePage"
      background
      :total="newList.length"
      hide-on-single-page
    >
    </el-pagination>
  </div>
</template>
<script>
import card from '@/components/shopList/card';
export default {
  data: () => {
    return {
      newList: [],
      totalPage: 2,
      currentPage: 1,
    };
  },
  computed: {
    splittedList() {
      return this.newList.slice(
        (this.currentPage - 1) * 12,
        this.currentPage * 12
      );
    },
  },
  components: {
    card,
  },
  props: ['list'],
  methods: {
    changePage(a) {
      console.log(a);
      this.currentPage = a;
    },
  },
  watch: {
    list(a) {
      this.newList = a;
    },
  },
};
</script>
<style lang="scss" scoped>
.shopList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .el-pagination {
    width: 80%;
    border: 1px solid #eee;
    border-radius: 2px;
    display: flex;
    justify-content: center;
  }
}
</style>
